<template style="background-color:white;">
  
    <el-form :model="form" label-width="auto" style="max-width:600px;max-height: 1200px;">
     <div style="background-color:none;">
      <h3>订单设置</h3>
      <el-form-item label="购买后">
        <el-input v-model="form.afterPurchase" style="width: 100px;"/>分钟未支付,则关闭订单 &nbsp;&nbsp;&nbsp; 建议5~120分钟
      </el-form-item>
      <el-form-item label="商家发货后">
        <el-input v-model="form.afterShipment" style="width: 100px;"/>未确认收货,系统自动确认收货&nbsp;&nbsp;&nbsp; 仅支持邮寄模式
      </el-form-item>
    </div>

    <div style="background-color:none;">
      <h3>现金卷使用规则</h3>
    <el-form-item label="叠加规则">
      <el-radio-group v-model="form.overlayRules">
        <el-radio value="false">不可叠加使用</el-radio>
        <el-radio value="true">可叠加使用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="会员折扣">
      <el-checkbox-group v-model="form.membershipDiscounts">
        <el-checkbox value="true" name="type">
          可与会员折扣共享
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="优惠卷">
      <el-checkbox-group v-model="form.coupons">
        <el-checkbox value="true" name="type">
          可与优惠卷共享
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </div>


   <div style="background-color:none;">
    <h3>预定商品确认</h3>
      <el-radio-group v-model="form.productConfirmation">
        <el-radio :value="1">不需要,系统自动确认</el-radio>
        <el-radio :value="2">需要,商家在后台确认预订,且超<el-input v-model="form.productConfirmationTime" style="width: 100px;"/> 分钟后未处理则自动
      <el-select placeholder="是否接受预约" style="width: 130px;">
        <el-option label="拒绝预约" :value="1" />
        <el-option label="接受预约" :value="2" />
      </el-select>
      <el-tooltip placement="bottom" >
    <template #content> 若使用汇付天下支付模式且启用住宿订单<br />则可能出现以下情况:住宿订单自动拒绝,<br />发起退款操作。而汇付账号余额每日凌晨;<br />动提现到您的银行账户中，汇付账号余额<br />款，若订单拒绝当天账户没有进账或商户<br />后台充值则此时订单退款将会失败 </template>
    <el-button>注意事项</el-button>
  </el-tooltip>
    </el-radio>
      </el-radio-group>
    </div>

     <div style="background-color:none;">
      <h3>预约商品购买限制</h3>
      预订日期范围<el-input v-model="form.purchaseRestrictions" style="width: 100px;"/>天,<span>预约商品日期范围，1~365天。例:若今天是2019.10.10,填写3天，购买时预约日期可选2019.10.10~2019.10.12之间日期</span>
    </div>
    <div style="background-color:none;">
      <h3>是否显示销量</h3>
      <el-radio-group v-model="form.displaySales">
        <el-radio :value="1">不显示</el-radio>
        <el-radio :value="2">显示实际销量</el-radio>
        <el-radio :value="3">初始销量<el-input v-model="form.beginSales" style="width: 100px;"/>设置后,顾客看到的销量=初始销量+实际销量+浮动值</el-radio>
      </el-radio-group>
    </div>

    <div style="background-color:none;">
       <h3>推荐商品展示</h3>
      <el-checkbox-group v-model="form.membershipDiscounts">
        <el-checkbox value="true" name="type">
          商品详情页展示
        </el-checkbox>
        <el-checkbox value="true" name="type">
          支付成功页展示
        </el-checkbox>
      </el-checkbox-group>
    </div>
    
     

    <div style="text-align: center;">
      <el-button type="primary" @click="oriductAdd()">保存</el-button>
    </div>
    </el-form>

</template>

<script lang="ts" setup>
import {reactive } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router= useRouter();



// do not use same name with ref
const form = reactive({
  afterPurchase: 20,
  afterShipment: 14,
  overlayRules: false,
  membershipDiscounts: true,
  coupons: true,
  productConfirmation: true,
  productConfirmationTime: 30,
  purchaseRestrictions: 85,
  displaySales: 2,
  beginSales: 0,
  recommendMerchandising: ''
});


const oriductAdd = () => {
   axios({
    url:"https://localhost:44392/PostProductSettings",
    method:"post",
    data:form
   }).then(res=>{
    if(res.data.code==200){
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
      
    }
   })

};
</script>
